<template>
  <div>
      <el-row>
        <el-radio-group v-model="selectedType">
          <el-button v-for="(item,index) in types" :key="index" :type="item.actvie ? 'primary' : ''" @click="changeType(item,index)">{{item.label}}</el-button>
        </el-radio-group>
      </el-row>
      <div class="content_border">
        <ClientInfo v-if="selectedType == 1" :fromdata="customerInfo"/>
        <CarInfo v-if="selectedType == 2"  :fromdata="customerInfo" :carId="carId"/>
        <HistoryInfo v-if="selectedType == 3" :fromdata="customerInfo" />
        <LevelInfo v-if="selectedType == 4"  :fromdata="customerInfo" />
        <CouponInfo v-if="selectedType == 5" :fromdata="customerInfo" />
        <ReturnVisitInfo v-if="selectedType == 6" :fromdata="customerInfo"  />
      </div>    
  </div>
</template>

<script>
  import { getClientById } from '@/api/after-sale/client/client'
  import { parseTimeToYMDHMS } from '@/utils'
  import CarInfo from './car-info';
  import ClientInfo from './client-info';
  import CouponInfo from './coupon-info';
  import HistoryInfo from './history-info';
  import LevelInfo from './level-info';
  import ReturnVisitInfo from './return-visit-info';

  export default {
    name: 'viewClientManage',
    components: {CarInfo, ClientInfo, CouponInfo, HistoryInfo, LevelInfo, ReturnVisitInfo },
    props: {
      id: {
        type: String|Number,
      },
      carId:{
        type:Number,//carId如果存在，则，车辆列表只显示对应表单
      }
    },
    data() {
      return {
        types: [
          {label: '客户信息', value: 1, actvie: true},
          {label: '车辆信息', value: 2, actvie: false},
          {label: '历史记录', value: 3, actvie: false},
          {label: '会员卡', value: 4, actvie: false},
          {label: '优惠卷', value: 5, actvie: false},
          {label: '回访记录', value: 6, actvie: false},
        ],
        selectedType: 1,
        selectedTypeText: '客户信息',
        customerInfo: {},
      }
    },
    async created() {
      const { data } = await getClientById(this.id)
      this.customerInfo = data
    },
    methods: {
      changeType(item, index){
        this.selectedType = index + 1;
        console.log(this.selectedType);
        this.selectedTypeText = item.label;
        this.types.map((e,i) => {
          if (i == index) {
            e.actvie = true;
          } else {
            e.actvie = false;
          }
        })
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .content_border {
    border: 1px solid #DCDFE6;
    padding: 15px;
    margin-top: 20px;
  }
</style>
